Note

Low Risk
CSS-only marketing hero layout at two breakpoints; no logic, data, or desktop behavior changes.

Overview
Repositions the Grok floating harness icon on narrow viewports so it no longer sits over the mobile hero headline.

At ≤820px, .hf-grok moves from the left stack beside the title to the top row, centered above the headline (top: 44px, left: calc(50% - 39px)). The layout comment is updated to describe three marks above the headline and two by the CTA.

At ≤340px, Grok’s compact placement is adjusted (top: 57px, left: calc(50% - 26px)) so it stays centered with the smaller mark size. Desktop and other float marks are unchanged.

^{Reviewed by Cursor Bugbot for commit 858b935. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Reposition Grok floating mark to top-center on mobile hero

On mobile, the .hf-grok floating mark was overlapping the hero copy. It is now positioned near the top of the hero and centered horizontally using calc(50% - 39px), moving it away from the headline and CTA. For viewports ≤340px, a separate rule centers it at calc(50% - 26px) with a slightly lower top offset.

^{Macroscope summarized 858b935.}